
import { ComponentProps, Mut, VueComponent } from "vue3-oop";
import { Collapse,CollapsePanel,FormItem, Input,Select,SelectOption,Button,Modal,Table,Space } from 'ant-design-vue';
import { FormData, WidgetItem } from '@/components/FormDesigner/types';
import { SELECT,STATUS_OPTIONS } from './attr-select'
import moduleCss from './cfg-select.module.scss';
import { EditFilled,CheckCircleFilled,DeleteFilled } from '@ant-design/icons-vue'
import CfgBasic from '../_common/cfg-basic'
import CfgLayout from '../_common/cfg-layout'
import CfgFormitem from '../_common/cfg-formitem'
import CfgField from '../_common/cfg-field'

interface IProps {
  formData: FormData,
  widgetItem: WidgetItem
}
export default class CfgSelect extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetItem: {}
  }

  @Mut() state ={
    layoutWinSize: this.props.formData.winSize,
    activePanel: ['BASIC','LAYOUT','SELECT'],
    modalVisible: false,
    editable: new Set<number>()
  }

  render(){
    const { formData,widgetItem } = this.props;
    const attr = widgetItem[widgetItem.type] as SELECT

    return(
      <Collapse
        activeKey={this.state.activePanel}
        onChange={(newActiveKey)=>{this.state.activePanel = newActiveKey as string[]}}
      >
        <CollapsePanel header='基本属性' key='BASIC' >
          <CfgBasic widgetItem={widgetItem} />
        </CollapsePanel>
        <CollapsePanel header='布局属性' key='LAYOUT' >
          <CfgLayout formData={formData} widgetItem={widgetItem} />
          <FormItem label="默认状态">
            <Select value={attr.layout_status} onChange={(value)=>{attr.layout_status = value as any}}>
              {STATUS_OPTIONS.map((item)=>(<SelectOption value={item.value}>{item.label}</SelectOption>))}
            </Select>
          </FormItem>
        </CollapsePanel>
        <CollapsePanel header='下拉选项属性' key='SELECT' >
          <CfgFormitem widgetItem={widgetItem} />
          <CfgField widgetItem={widgetItem} />
          <FormItem label="静态选项">
            <Button size="small" onClick={()=>{this.state.modalVisible = true}}>编辑</Button>
            <Modal
              visible={this.state.modalVisible}
              title='静态选项'
              class={[moduleCss['fdn-modal-option']]}
              onCancel={()=>{this.state.modalVisible=false}}
            >
              {{
                default:()=>(<Table 
                  key='value'
                  pagination={false}
                  columns={[{title: '选项值',dataIndex: 'value',width:'30%'},{title: '选项标签',dataIndex: 'label',width:'50%'},{title: '操作',dataIndex: 'actions',width:'20%'}]}
                  dataSource={attr.options}
                >
                  {{
                    bodyCell:({text, record, index, column}:any)=>{
                      if(column.dataIndex==='value'&&this.state.editable.has(index)){
                        return <Input value={record.value} onChange={(event)=>{record.value = event.target.value as string;}} />
                      }
                      if(column.dataIndex==='label'&&this.state.editable.has(index)){
                        return <Input value={record.label} onChange={(event)=>{record.label = event.target.value as string;}} />
                      }
                      if(column.dataIndex==='actions'){
                        return <Space>
                          {this.state.editable.has(index)?<CheckCircleFilled onClick={()=>{this.state.editable.delete(index)}}/>:<EditFilled onClick={()=>{this.state.editable.add(index)}} />}
                          <DeleteFilled onClick={()=>{attr.options.splice(index,1)}} />
                        </Space>
                      }
                    }
                  }}
                </Table>),
                footer:()=>(<Space>
                  <Button onClick={()=>{attr.options.push({value:'',label:''});this.state.editable.add(attr.options.length-1)}}>添加</Button>
                  <Button onClick={()=>{this.state.modalVisible=false}}>关闭</Button>
                </Space>)
              }}
            </Modal>
          </FormItem>
        </CollapsePanel>
      </Collapse>
    )
  }
}